<script type="text/javascript">
    var chart = null,
    options = {
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Grafik Penjualan Tahun '+<?= $tahun;?>
        },
        subtitle: {
            text: 'Kita Mart'
        },
        xAxis: {
            categories: [],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rupiah Penjualan',
                align: 'high'
            }
        },
        tooltip: {
            formatter: function() {
                return '' + this.series.name + ': ' + this.y + ' ';
            }
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -100,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: []
    };
    $(document).ready(function() {
        updateChart();
    });

    function updateChart() {
        //$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?',
        //function(data) {
        var data = [
            {
                name: '<?= $name; ?>',
                data: <?= $total; ?>
            }
        ];
        var bulan = [
            {
                categories: [<?= $bulan;?>]
            }
        ];
        // check if the chart's already rendered
        if (!chart) {
            // if it's not rendered you have to update your options
            options.series = data;
            options.xAxis = bulan;
            chart = new Highcharts.Chart(options);
        } else {
            // if it's rendered you have to update dinamically
            jQuery.each(data, function(seriePos, serie) {
                chart.series[seriePos].setData(serie, false);
            });
            chart.redraw();
        }
        // });
    }
</script>
<h1>Hutang</h1>
<div id="container" style="height: 500px; min-width: 500px"></div>